import React, { useEffect, useState } from 'react'

// children只能是单个元素
const VisibleControl = ({ visible, defaultRender = false, children, ...rest }: any) => {
  const [isLoad, setIsLoad] = useState(defaultRender)

  useEffect(() => {
    if (visible) {
      !isLoad && setIsLoad(true)
    }
  }, [visible])

  if (!isLoad) return null

  return (
    <div {...rest} className={`${visible ? 'fadeIn' : 'fadeOut'}`}>
      {children}
    </div>
  )
}

export default VisibleControl